<template>
	<view class="exam-top">
		<!-- widthFix 这个mode表示宽度不变，高度自适应 -->
		<image src="/static/logo.png" mode="widthFix"></image>
		<text>在线考试系统</text>
	</view>
	<view class="exam-mid">
		<view class="intro">
			<text>考试类型：摩托车</text>
			<text>考试时间：45分钟</text>
			<text>合格标准：90分</text>
			<text>出题规则：随机抽题随机抽题随机抽题随机抽题随机抽题随机抽题随机抽题</text>
		</view>
		<view class="doit">
			<button size="mini" type="primary" @click="doexam">开始考试</button>
		</view>
	</view>
</template>

<script setup>
import { requestPostJson, pathNewExam } from '@/api/request';
	// 点击开始考试按钮
	const doexam = async () => {
		try {
			// 首先请求后端，生成一套试题
			// GET调用 /exam/newexam
			const res = await requestPostJson(pathNewExam);
			if (!res || res.code !== 0) {
				uni.showToast({
					title: '获取试题失败',
					duration: 2000,
					icon: 'error'
				});
				return;
			}

			console.log('获取试题成功:', res);
			// 拿到试题ID，跳转到考试页面
			// res.data.examId
			let examId = res.data.examId;
			console.log("examId=", examId);
			if (!examId) {
				uni.showToast({
					title: '获取试题失败2',
					duration: 2000,
					icon: 'error'
				});
				return;
			}
			// 跳转到考试页面，并传递 examId 参数
			uni.navigateTo({
				url: '/pages/exampage/exam?examId=' + examId
			});
		} catch (err) {
			console.log('获取试题失败:', err);
			uni.showToast({
				title: '网络异常',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
	}
	
</script>

<style scoped>
	/* 该容器布局为flex模式，居中，字体加粗，距顶部 300rpx */
	/* 在一个 屏幕宽度为 750 物理像素（px）的设备上，1rpx = 1px。 苹果11系列手机屏幕宽度均为 375px，所以 1rpx = 0.5px */
	/* 在其他宽度的设备上，rpx 会自动等比缩放。 */
	.exam-top {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 300rpx;
		font-weight: bold;
		font-size: 35rpx;
		flex-direction: column; /* 让子元素垂直排列 */
	}

	/* 图片宽度为 100rpx，高度自适应，底部留白 20rpx， 文字独立成行 */
	.exam-top image {
		width: 100rpx;
		height: auto;
		margin-bottom: 20rpx;
		display: block;
	}

	.exam-top text {
		display: block;
	}

	.exam-mid {
		margin: 30rpx 20%;
		display: flex;
		flex-direction: column; /* 让子元素垂直排列 */
		align-items: center;
	}
	
	.exam-mid .intro {
		display: flex;
		flex-direction: column; /* 让子元素垂直排列 */
		font-size: 30rpx;
		line-height: 50rpx; /* 行高 */
	}
	
	/* doit 表示开始考试的那个容器，这个容器必须首先设置为100%，才能使得后边 button 的100% 生效 */
	.exam-mid .doit {
		margin-top: 30rpx;
		font-size: 30rpx;
		width: 100%;
	}
	.exam-mid .doit button {
		width: 100%;
	}

</style>
